{% extends "../../theme/map_calcubic_full.html" %}
{% block head %}
<title>地图画板 地图叠加</title>

    <script type="text/javascript" src="{{ static_url('jslib/dst/L.Map.Sync.js') }}"></script>

<SCRIPT>
    var vlon = {{ kwd['lon']}};
    var vlat = {{ kwd['lat']}};
    var vzoom_current = {{ kwd['zoom_current'] }};
    var vzoom_max = {{ kwd['zoom_max']}};
    var vzoom_min = {{ kwd['zoom_min']}};

</script>

 <style type="text/css">
        html, body { width: 100%; height: 100%; margin: 0; }
        #map1, #map2 { width: 49.9%; height: 100%; }
        #map1 { float: left; }
        #map2 { float: right; }
    </style>

{% end %}

{% block zhuti %}
<input id="app_ctrl" value="{{ app_str }}" style="display: none;">



    <div id="map1"></div>
    <div id="map2"></div>


<script type="text/javascript">

    var marker1;
    var marker2;

    popup = L.popup();

    $.ready()
    {
        var app_arr, app_url, baseMaps, ii, jj, lyrs, map, mycars, osm, overlayMaps;

        app_url = $("#app_ctrl").val();
        app_arr = app_url.split("/");



        osm = L.tileLayer.chinaProvider('Google.Normal.Map', {
maxZoom: 18,
minZoom: 1
});




        osm2 = L.tileLayer.chinaProvider('Google.Normal.Map', {
maxZoom: 18,
minZoom: 1
});



        m1 = L.tileLayer.wms("http://wcs.osgeo.cn:8088/service?", {
            layers: "maplet_" + app_arr[0].substring(1),
            format: "image/png",
            transparent: !0,
            attribution: "Maplet"
        });

        m2 = L.tileLayer.wms("http://wcs.osgeo.cn:8088/service?", {
            layers: "maplet_" + app_arr[1].substring(1),
            format: "image/png",
            transparent: !0,
            attribution: "Maplet"
        });


        var center = [vlat, vlon];

        var map1 = L.map('map1', {
            layers: [osm, m1],
            center: center,
            zoom: vzoom_current,
            maxZoom: vzoom_max,
            minZoom: vzoom_min
        });

        map1.attributionControl.setPrefix('');


        var map2 = L.map('map2', {
            layers: [osm2, m2],
            center: center,
            zoom: vzoom_current,
            maxZoom: vzoom_max,
            minZoom: vzoom_min,
            zoomControl: false
        });

        map1.sync(map2);
        map2.sync(map1);


        marker1 = L.marker(map1.getCenter()).addTo(map1);
        marker2 = L.marker(map2.getCenter()).addTo(map2);

        map1.on("moveend", function (e) {marker1.setLatLng(map1.getCenter());});
	map1.on("move", function (e) {marker1.setLatLng(map1.getCenter());});
	map1.on("zoom", function (e) {marker1.setLatLng(map1.getCenter());});

        map2.on("moveend", function (e) {marker2.setLatLng(map2.getCenter());});
        map2.on("move", function (e) {marker2.setLatLng(map2.getCenter());});
        map2.on("zoom", function (e) {marker2.setLatLng(map2.getCenter());});

        baseMaps1 = {'basemap': osm};
        overlayMaps1 = {"{{app_arr[0].title}}" : m1};
        L.control.layers(baseMaps1, overlayMaps1).addTo(map1);

        baseMaps2 = {'basemap': osm2};
        overlayMaps2 = {"{{app_arr[1].title}}": m2};
        L.control.layers(baseMaps2, overlayMaps2).addTo(map2);

    }
</script>

{% end %}
